*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #e5e5e5;
    height: 100vh;
    width: 100%;
}

a{
    text-decoration: none;
    color:black;
}

li{
    list-style: none;
}

nav{
    background: white;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.7);
}

.container{
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-nav-list{
    display: flex;
}

.nav-link{
    padding:0.5rem 1rem;
    display: inline-block;
    transition: all 0.4s;
}

.nav-link:hover{
    background: rgba(139, 136, 136, 0.7);
    color:white;
    border-radius: 5px;
}
.nav-link.active{
    background: green;
    color:white;
    border-radius: 5px;
}

.side-nav, 
.toggler{
    display: none;
}


@media (max-width: 550px){

    .side-nav{
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:-100%;
        width:60vw;
        background: white;
        transition: all 1s;
        z-index: 1;
    }



    .close-btn{
        font-size:2rem;
        position: absolute;
        right:5px;
        top:5px;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: transform 0.5s;
    }

    .close-btn:hover{
        transform: rotate(180deg);
        text-decoration: none;
        color:grey;
    }

    .side-nav-list{

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }


    .side-nav-list li{
        width: 100%;
        text-align: center;
        font-size: 12px;;
    }
    .side-nav-link{
        display: inline-block;
        width:90%;
        transition: all 0.4s;
    }

    .side-nav-link:hover{
        background: rgba(139, 136, 136, 0.7);
        color:white;
        border-radius: 5px;
        text-decoration: none;
  
    }

    .top-nav-list{
        display: none;
    }
    .logo{
        padding: 0.5rem 0;
    }

    .toggler{
        display: block;
        margin-right: 1rem;
        font-weight: bolder;
        font-size: larger;
    }
    .container{
        justify-content: flex-start;
    }
    .side-nav-link.active{
        background: green;
        color:white;
        border-radius: 5px;
    }


}